<template>
    <section class="index-search">
        <div class="container" >
                <div class="left">
                    <div class="left-container" v-if="navlist.type!==1">
                        <p class="title">{{navlist.name}}</p>
                        <span class="sub-title">{{navlist.title}}</span>
                    </div>
                    <div class="left-container" v-if="navlist.type ===1">
                        <p class="title"><img :src="$Url+list.images" alt=""></p>
                    </div>
                    <div class="select-city select-name" v-if="navlist.type ===1">
                        {{list.name}} <br>
                        <span> + 加入</span>
                    </div>
                    <div class="select-city" v-if="navlist.type!==1" :style="{'padding-top':height+'px'}">
                        徐州市<Icon type="ios-arrow-down" />
                    </div>
                </div>
                <div class="center">
                    <div class="search-input">
                        <div class="input-box">
                            <div class="option">
                                <Dropdown>
                                <span>
                                      帖子
                                <Icon type="ios-arrow-down"></Icon>
                                </span>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>帖子</DropdownItem>
                                        <DropdownItem>用户</DropdownItem>
                                        <DropdownItem>圈子</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                            <input type="text" placeholder="请输入想要搜索的内容">
                            <span class="search-btn"><Icon class="icon" type="ios-search-outline" /></span>
                        </div>
                    </div>
                </div>
                <div class="right" >
                    <div class="btn-group" v-if="navlist.type !== 5">
                        <span class="option-btn" @click="fun(list.id)" v-if="navlist.type !==2"><Icon type="ios-paper"  />{{navlist.text}}</span>
                        <span class="option-btn" @click="cun(navlist.mytext)"><Icon type="ios-paper" />{{navlist.mytext}}</span>
                    </div>
                </div>
        </div>
    </section>
</template>

<script>
export default {
    name: 'IndexSearch',
    props: ['navlist','height','list'],
    data () {
      return {}
    },
    created () {

    },
    methods:{
      fun (id) {

          this.$router.push({path: '/post',query:{id:id}})
      },
        cun (text) {
          if(text =='我的帖子')
            this.$router.push({path: '//my/mygroup/topiclist'})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
    .index-search {
        background-color: #fff;
        padding: 30px 0 15px;
        .container {
            display: flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            .left {
                display: flex;
                padding-left: 10px;
                .left-container {
                    .title {
                        font-size: 36px;
                        color: @theme-color-dark;
                    }
                    .sub-title {
                        font-size: 16px;
                        color: @theme-color;
                    }
                    img{
                        width: 70px;
                        height: 70px;
                        border-radius: 50%;
                    }
                }
                .select-name{
                    padding: 5px 10px 0 22px !important;
                }
                .select-city {
                    cursor: pointer;
                    font-size: 18px;
                    color: @theme-color-dark;
                    width: 154px;
                    padding: 24px 10px 0 22px;
                    span{
                        margin-top: 5px;
                        background-color: #FE91A5;
                        color: white;
                        border-radius: 4px;
                        padding: 2px 8px;
                        border-bottom: 2px solid #FE5371;
                    }
                }
            }
            .right {
                padding-right: 10px;
                .option-btn {
                    display: inline-block;
                    border-radius: 4px;
                    height: 36px;
                    line-height: 36px;
                    font-size: 16px;
                    background-color: @theme-color-dark;
                    border-bottom: 2px solid #f4162d;
                    color: #fff;
                    padding: 0 20px;
                    cursor:pointer;
                    &:first-child {
                        margin-right: 20px;
                    }
                }
            }
            .center {
                padding: 0 40px 0 0;
                /*z-index: 1024;*/
                .input-box {
                    border: 2px solid @theme-color-dark;
                    width: 500px;
                    height: 40px;
                    color: @theme-color-dark;
                    padding: 0 60px 0 90px;
                    position: relative;
                    .option {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        color: #999999;
                        width: 90px;
                        background-color: #fafafa;
                        border-right: 1px solid @theme-color-dark;
                    }
                    input {
                        height: 36px;
                        border-color: transparent;
                        outline:none;
                        width: 100%;
                        padding: 0 10px;
                    }
                    .search-btn {
                        position: absolute;
                        right: 0;
                        height: 36px;
                        line-height: 36px;
                        width: 60px;
                        text-align: center;
                        border-left: 1px solid @theme-color-dark;
                        background: @theme-color-dark;
                        .icon {
                            font-size: 30px;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>
